<template>
	<!-- 选择城市页 -->
	<view class="container">
		<!-- 头部 -->
		<view class="top">
			<view class="back" @click="back">
				<image src="../../static/assets/back2.png" mode=""></image>
			</view>
			<view class="title">
				选择城市
			</view>
		</view>
		<!-- 当前城市 -->
		<view class="now">
			<view class="dangqian">当前城市 </view>
			<view class="nowitem">{{nowcity}}</view>
		</view>
		<!-- 热门城市 -->
		<view class="hot">
			<view class="remen">热门城市 </view>
			<view class="hotlist">
				<block v-for="(item,index) in citylist" v-bind:key='item.id' >
					<view class="hotitem" @click="choosecity(item.city,index)">{{item.city}}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import store from "../../store/index.js"
	export default {
		computed:{
			// nowcity:{
			// 	get(){
			// 		return store.state.nowCity
			// 	},
			// 	set(newval){
			// 		console.log(newval)
			// 		return newval
			// 	}
			// }
		},	
		watch:{
			'nowcity':{
				handler:function(newval){
					console.log('侦听nowcity变化',newval)
					return newval
				}
			}
		},
		data() {
			return {
				nowcity:'北京',
				citylist: [
					{city: '广州',id: 0},
					{city: '北京',id: 1},
					{city: '杭州',id: 2},
					{city: '南京',id: 3}],
			}
		},
		methods: {
			//返回上一级页面
			back(){
				uni.navigateBack();
			},
			choosecity(item,index){
				console.log(item,index);
				this.nowcity=item;
				this.$store.commit('setNowCity',item);
				// this.$store.dispatch('setNowCityAsync',item);//有异步请求时用到
				let timer=setTimeout(()=>{
					uni.navigateBack();
				},1500)
			}
		},
		onLoad(){
		}
	}
</script>

<style lang="scss">
.container{
	.top{
		width: 100%;
		padding: 1.2rem 0 ;
		background-color: #6a6da9;
		display: flex;
		align-items: center;
		.back{
			width: 40px;
			height: 40px;
			margin-left: 1rem;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.title{
			flex: 1;
			line-height: 100%;
			font-size: 1.3rem;
			color: #FFFFFF;
			font-weight: bold;
			text-align: center;
			margin-right: 2rem;
		}
	}
	.now{
		margin-top: 1rem;
		color: diagray;
		.dangqian{
			padding: 0.2rem 0.5rem;
		}
		.nowitem{
			width: 20%;
			text-align: center;
			padding: 0.4rem  0.2rem ;
			margin-top: 0.5rem;
			margin-left: 0.5rem;
			background-color: #Eee;
		}
	}
	.hot{
		margin-top: 1rem;
		color: diagray;
		.remen{
			padding: 0.2rem 0.5rem;
		}
		.hotlist{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.hotitem{
				width: 20%;
				text-align: center;
				padding: 0.4rem  0.2rem ;
				margin-top: 0.5rem;
				margin-left: 0.5rem;
				background-color: #Eee;
			}
		}
		
	}
}
</style>
